<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<style>
		body{margin:0;padding:0;color:#fff;}
		h1{margin:0;}
		.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
		.clearfix{zoom:1;}
		.head{height:60px;text-align:center;background:rgba(177,38,298,1);}
		.foot{height:100px;text-align:center;background:rgba(38,218,177,1);}
		.main{margin:0 auto;width:1000px;}
		.left{float:left;width:800px;height:1000px;background:rgba(198,187,138,1);}
		.right{float:left;width:200px;height:1000px;background:rgba(98,87,238,.7);}

		#container{position:relative;margin:0 auto;width:960px;}
		#ad{position:relative;overflow:hidden;text-align:center;color:#333;}
		#container .ad-close{position:absolute;top:0;right:-18px;width:18px;height:55px;background:url(img/ad_btn.png) -19px 0 no-repeat;}
		#container .ad-replay{display:none;position:absolute;right:-20px;bottom:-20px;width:55px;height:18px;background:url(img/replay.gif);}
		#ad img{vertical-align:bottom;}


		#ad .adleft{position:fixed;top:50%;left:40px;margin-top:-140px;width:120px;height:280px;text-align:left;}
		#ad .adleft img{width:100%;}
		#ad .adright{position:fixed;top:50%;right:40px;margin-top:-140px;width:120px;height:280px;text-align:left;}
		#ad .adright img{width:100%;}
		
	</style>
	<script>
		window.onload = function(){
				var ad = document.getElementById('ad');
//左右侧广告
				var adLeft = ad.getElementsByClassName('adleft')[0];
				var adRight = ad.getElementsByClassName('adright')[0];
				var adLeftBtn = adLeft.getElementsByTagName('span')[0];
				var adRightBtn = adRight.getElementsByTagName('span')[0];
				adLeftBtn.onclick = sideAdClose(adLeft);
				adRightBtn.onclick = sideAdClose(adRight);
				function sideAdClose(obj){
					function foo() {
						obj.style.display = 'none';
					}
					return foo;
				}
/*大屏广告控制*/
				var containerAd = document.getElementById('container');
				var adReplay = containerAd.getElementsByClassName('ad-replay')[0];
				var adClose = containerAd.getElementsByClassName('ad-close')[0];
				var adHeight = parseInt(window.getComputedStyle(ad).height); //获取盒子初始高度
				var step = -5;
				var adNewHeight=0;
				var t;
				function toMin () {
					adNewHeight = adNewHeight + step;
					ad.style.height = adHeight + adNewHeight +'px';
					if(Math.abs(adNewHeight)>=adHeight){
						clearTimeout(t);
						adReplay.style.display = 'block';
						adClose.style.display = 'none';
					}else{
						t = setTimeout(toMin,30);
					}
				}
				toMin();
				function toMax () {
					adNewHeight = adNewHeight - step;
					ad.style.height = adNewHeight +'px';
					if(Math.abs(adNewHeight)>=adHeight){
						clearTimeout(t);
						adReplay.style.display = 'none';
						adClose.style.display = 'block';
					}else{
						t = setTimeout(toMax,30);
					}
				}
				adReplay.onclick = function () {
					adNewHeight=0;
					toMax();
				}
				adClose.onclick = function () {
					adNewHeight=0;
					toMin();
				}
		};

		
	</script>
</head>
<body>
	<div id="container">
		<div id="ad">
			<!-- <div id="ad-pic"> -->
				<img src="img/960_37.gif" alt="advertisement">
			<!-- </div> -->
			<div class="adleft" style="display:block;"><a href="#"><img src="img/250_3.gif" alt=""></a><span>关闭</span></div>
			<div class="adright" style="display:block;"><a href="#"><img src="img/dl_23.gif" alt=""></a><span>关闭</span></div>
		</div>
		<a class="ad-close" style="display:block;" href="javascript:" title="button"></a>
		<a class="ad-replay" style="display:none;" href="javascript:" title="button"></a>
	</div>
	
	<div class="head"><h1>头部</h1></div>
	<div class="main clearfix">
		<div class="left"><h1>左栏内容</h1></div>
		<div class="right"><h1>右栏内容</h1></div>
	</div>
	<div class="foot"><h1>底部</h1></div>
	
	
</body>
</html>